<template>
	<view>
		<view class="bc-navbar">
			<navbar title='个人资料' :is-child="true" />
		</view>
		<view style="margin: 0 20rpx;">
			<view style="display: flex; justify-content: center;">
				<view class="img-boxs">
					<view>
						<image :src="userInfo.avatarUrl" @click="handleUpImg"> </image>
					</view>
				    <view class="cover-view">
						<text>修改头像</text>
					</view>
				</view>
			</view>
			<view style="margin-top: 30rpx; padding: 0 30rpx;">
				<u--form>
					<u-form-item borderBottom label="昵称">
						<u--input border="none" v-model="userInfo.nickName"></u--input>
					</u-form-item>
					<u-form-item borderBottom label="邮箱">
						<u--input disabled disabledColor="#FFF" border="none" v-model="userInfo.email"></u--input>
					</u-form-item>
				</u--form>
			</view>
			<view style="margin-top: 80rpx; padding: 0 20rpx;">
				<u-button text="更新个人信息" color="#5976d6" @click="submit"></u-button>
			</view>
		</view>
	</view>
</template>

<script>
	
	import { uploadFilePromise } from '@/apis/upload.js'
	import { updateLoginInfo, getLoginInfo } from '@/apis/user.js'
	import { mapMutations } from 'vuex'
	
	export default {
		data() {
			return {
				enableSubmit: true,
				userInfo: {
					nickName: this.$store.state.user.nickName,
					email: this.$store.state.user.email,
					avatarUrl: this.$store.state.user.avatarUrl,
					avatarPath: ''
				}
			}
		},
		methods: {
			...mapMutations(['setUserInfo']),
			handleUpImg() {// 点击图片区域，选择图片并上传
			    uni.chooseImage({// 选择图片
			        count: 1,
			        success: (res) => { 
						uploadFilePromise(res.tempFilePaths[0]).then(res => {
							this.userInfo.avatarUrl = res.data.url;
							this.userInfo.avatarPath = res.data.path;
						});
			        }
			    })
			},
			submit() {
				let _this = this;
				_this.enableSubmit = false;
				updateLoginInfo({ nickName: this.userInfo.nickName,  avatarUrl: this.userInfo.avatarPath}).then(res => {
					uni.showToast({
						icon: 'success',
						position: 'bottom',
						title: '修改信息成功'
					});
					getLoginInfo().then(res => {
						// 获取登录信息
						_this.setUserInfo(res.data)
						setTimeout(function(){
							uni.switchTab({
								url: '/pages/me/me'
							})
						}, 1000);
					})
				})
				setTimeout(function() {
					_this.enableSubmit = true;
				}, 2000)
				
			}
		}
	}
</script>

<style scoped>
	.img-boxs {
		width: 200rpx;
		height: 200rpx;
		border-radius: 100%;
		position: relative;
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
		z-index: 999;
		overflow: hidden;
	}

	.img-boxs image {
		width: 200rpx;
		height: 200rpx;
		border-radius: 100%;
		margin-bottom: 10px;
	}

	.img-boxs .cover-view {
		width: 200rpx;
		height: 80rpx;
		text-align: center;
		color: #fff;
		background-color: rgba(107, 96, 99, .4);
		position: absolute;
		left: 50%;
		top: 66%;
		transform: translate(-50%, 0);
	}

	.u-form-item__body__left {
		font-weight: 600 !important;
	}
	
</style>
